<template>
  <a-spin :spinning="loading">
    <!-- 头部信息 -->
    <div>
      送货地址：
    </div>
    <div class="left">
      送货地址：
      {{(detail.shippingAddressInfo?.shippingStreetLine1) + "，" + (detail.shippingAddressInfo?.shippingCity) + "，" + (detail.shippingAddressInfo?.shippingRegion) + "，" + detail.shippingAddressInfo?.shippingPostcode + " | " + (detail.shippingAddressInfo?.shippingCountry)}}
    </div>
    <div class="left">
      收货人：{{detail.shippingAddressInfo?.shippingCustomerName + " | " + detail.shippingAddressInfo?.shippingTelephone + " | " + detail.shippingAddressInfo?.shippingEmail}}
    </div>
    <div style="margin-top: 20px">
      备注信息：
    </div>
    <div class="left">
      客服备注：{{detail.customerServiceNote}}
    </div>
    <div class="left">
      系统备注：{{detail.systemNote}}
    </div>
    <div class="left">
      异常备注：{{detail.abnormalNote}}
    </div>
    <div style="margin-top: 20px">
      图片信息：
    </div>
    <div style="display: flex;flex-wrap: wrap;margin-top: 10px">
      <el-image v-viewer v-if="detail.imgList" v-for="item in detail.imgList.split(',')" style="width: 100px; height: 100px;margin-left: 10px;padding:10px"
                :src="item"
                :hide-on-click-modal="true"
                fit="scale-down"
      />
    </div>
    <div style="margin-top: 20px" v-if="detail.verifyOrderList && detail.verifyOrderList.length > 0">
      <span>履约审单：</span>
      <el-table :data="detail.verifyOrderList" border style="width: 100%;margin-top: 10px"
                :header-cell-style="{'text-align': 'center','color':'black','background-color':'#6593d5'}"
                :cell-style="{'text-align': 'center','color':'black'}">
        <el-table-column v-for="item in columns" :width="item.width" :prop="item.dataIndex" :label="item.title">
          <template #default="scope" v-if="item.dataIndex === 'timeItem'">
            {{ scope.row[item.dataIndex].earliestDeliveryTime + "~" + scope.row[item.dataIndex].latestDeliveryTime }}
          </template>
          <template #default="scope" v-else>
            {{scope.row[item.dataIndex]}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="display: flex;">
      <div style="margin-top: 10px;font-size: 17px;font-weight: bold;margin-left: 50px">海运头程轨迹</div>
      <div style="margin-top: 10px;font-size: 17px;font-weight: bold;margin-left: 500px">
        <span>尾程轨迹</span>
        <a-button type="link" @click="open = true">展开</a-button>
      </div>
    </div>
    <div style="display: flex">
      <div style="margin-left: 30px">
        <a-steps
            style="margin-top: 20px;margin-left: 20px"
            direction="vertical"
            :current="shippingStep"
            :items="containerNo"
        ></a-steps>
      </div>
      <div style="margin-left: 280px">
        <a-timeline style="margin-top: 20px;margin-left: 20px">
          <a-timeline-item
              v-for="(item, index) in trackingLogs.length > 3 ? firstTrackList : trackingLogs"
              :color="item.eventStatus === 'delivered' ? 'green' : 'blue'"
          >
            <div>{{item.eventTime}}</div>
            <div>{{item.eventDetail}}</div>
          </a-timeline-item>
        </a-timeline>
      </div>
    </div>
  </a-spin>
  <a-modal v-model:open="open" title="尾程轨迹">
    <template #footer>
      <a-button type="primary" @click="open = false">关闭</a-button>
    </template>
    <a-timeline style="height: 500px;overflow: auto">
      <a-timeline-item
          v-for="(item, index) in trackingLogs"
          :color="item.eventStatus === 'delivered' ? 'green' : 'blue'"
      >
        <div>{{item.eventTime}}</div>
        <div>{{item.eventDetail}}</div>
      </a-timeline-item>
    </a-timeline>
  </a-modal>
</template>
<script setup>
import {ref,reactive,computed} from "vue";
import {getOrderTrackingLogInfo, getTabLogisticsDetail} from "@/api/standard/index.js";
import {message} from "ant-design-vue";
const open = ref(false)
const headPathList = ref({})
const containerNo = computed(()=>{
  return [
    {
      title:"READY TO BE LOADED",
      description:headPathList.value.onloadDate || ""
    },
    {
      title:"DEPARTURE",
      description:headPathList.value.departureDate || ""
    },
    {
      title:"ESTIMATED ARRIVAL FINAL PORT",
      description:headPathList.value.estimatedArrivalDate || ""
    },
    {
      title:'ARRIVAL FINAL PORT',
      description:(headPathList.value.arrivalDate || '') + ' ' + (headPathList.value.arrivalPort || '')
    },
    {
      title:"WAREHOUSE RECEIPT",
      description:headPathList.value.receiptDate || ""
    }
  ]
})
const trackingLogs = ref([])
const firstTrackList = computed(()=>{
    let arr = trackingLogs.value
    console.log(arr.slice(0,3))
    return arr.slice(0,3)
})
const props = defineProps({
  saleOrderCode:{
    type:String,
    default:''
  }
})
const detail = reactive({
  address:{
    shippingStreetLine1: "",
    shippingStreetLine2: "",
    shippingCity: "",
    shippingRegion: "",
    shippingPostcode: "",
    shippingCountry: ""
  },
  person: {
    shippingCustName: "",
    shippingTelephone: "",
    shippingEmail: ""
  },
  csticket:"",
  verifyOrderList:[],
  imgList:"",
})
const shippingStep = computed(()=>{
  let stepStatus = -1
  for (let key in headPathList.value) {
    stepStatus += headPathList.value[key] ? 1 : 0
  }
  return stepStatus
})
const loading = ref(false)
const columns = [
    {
    title:"仓库SKU",
    dataIndex:"warehouseSku",
    key: "warehouseSku",
    align:"center",
    width: 200
  },
  {
    title:"数量",
    dataIndex:"qty",
    key: "qty",
    align:"center",
    width:200,
  },
  {
    title:"物流",
    dataIndex:"specialService",
    key: "specialService",
    align:"center",
    width:200,
  },
  {
    title:"平台SKU",
    dataIndex:"productSku",
    key: "productSku",
    align:"center",
    width: 200
  },
  {
    title:"交期",
    dataIndex:"timeItem",
    key: "timeItem",
    align:"center",
    width: 200
  },
  {
    title:"库存池",
    dataIndex:"poolCode",
    key: "poolCode",
    align:"center",
    width: 200
  },
  {
    title:"ETA",
    dataIndex:"eta",
    key: "eta",
    align:"center",
    width: 200
  },
  {
    title:"状态",
    dataIndex:"poolStatus",
    key: "poolStatus",
    align:"center",
    width: 200
  },
  {
    title:"最迟标发",
    dataIndex:"delayFor",
    key: "delayFor",
    align:"center",
    width: 200
  },
  {
    title:"易仓版本",
    dataIndex:"sourceVersion",
    key: "sourceVersion",
    align:"center",
    width: 200
  },
  {
    title:"需调整版本",
    dataIndex:"chVerion",
    key: "chVerion",
    align:"center",
    width: 200
  },
]
const init = async () => {
  try{
    loading.value = true
    const res = await getTabLogisticsDetail({saleOrderCode:props.saleOrderCode})
    for (let resultKey in res.result) {
      if(resultKey === 'imgList' && res.result[resultKey] === null){
        detail[resultKey] = ''
      }else {
        detail[resultKey] = res.result[resultKey]
      }
    }
    const res1 = await getOrderTrackingLogInfo({saleOrderCode:props.saleOrderCode})
    headPathList.value = res1.result.shippingLog
    trackingLogs.value = res1.result.trackingLogs === null ? [] : res1.result.trackingLogs
  }catch(e){
    message.error(e)
  }finally {
    loading.value = false
  }
}
defineExpose({
  init
})
</script>

<style scoped>
.left{
  margin-left: 20px;
}
:deep(.ant-timeline-item){
  padding-top:7px!important;
  padding-bottom:10px!important;
}
</style>
